Documentation/ Utilities
Available Classes
Alignment
| Class | Description |
|---|---|
.util-align-left
|
Floats an element to the left of the content with spacing. |
.util-align-center
|
Centers and element on the page with spacing. |
.util-align-right
|
Floats an element to the right of the content with spacing. |
Colors
Checkout the colors docs for a list of available classes.
Display
| Class | Description |
|---|---|
.util-display-none
|
Hides an element by setting display none. * Can be responsive |
.util-block
|
Sets an element to display block. * Can be responsive |
.util-inline
|
Sets an element to display inline. |
.util-inline-block
|
Sets an element to display inline-block. |
.util-visually-hidden
|
Visually hides an element by hidding it off screen. The element is still visible to assistive technologies. * Can be responsive |
.util-delist
|
Removes the list styles from ordered and unordered lists. |
General
| Class | Description |
|---|---|
.util-clearfix
|
Prevents an element from collapsing due to margins for floated contents. |
.util-scrollable-content
|
Allows for the contents of an element to have a horizontal scroll if needed. |
.util-delist
|
Removes the list styles from ordered and unordered lists. |
.util-underline-hover
|
Adds a text underline when an element is hovered. |
.util-delink
|
Removes link styles from and element. |
.util-full-width
|
Sets the width of an element to 100%. |
Positioning
| Class | Description |
|---|---|
.util-position-fixed
|
Sets the position of an element to be fixed. |
.util-position-absolute
|
Sets the position of an element to be absolute. |
.util-position-relative
|
Sets the position of an element to be relative. |
.util-position-static
|
Sets the position of an element to be static. |
.util-position-{side}-{direction}-{size}
|
Sets the positioning of an element in accordance with the provided values. Valid sides are top and left. Valid directions are pos and neg.Valid sizes are md (1em), lg (5em), and xl (8em).* Can be responsive |
Text
| Class | Description |
|---|---|
.util-text-center
|
Centers the text of an element. |
.util-text-right
|
Right aligns the text of an element. |
.util-text-left
|
Left aligns the text of an element. |
.util-text-bold
|
Styles the text with a bold font-weight. |
.util-text-italic
|
Styles the text with an italic font. |
Font Size
These classes can be applied to text elements to change their size.
| Class | Description |
|---|---|
.util-font-size-xs
|
Changes font size to 1.125em. * Can be responsive |
.util-font-size-sm
|
Changes font size to 1.375em. * Can be responsive |
.util-font-size-md
|
Changes font size to 1.625em. * Can be responsive |
.util-font-size-lg
|
Changes font size to 1.75em. * Can be responsive |
.util-font-size-xl
|
Changes font size to 2.25em. * Can be responsive |
.util-font-size-xxl
|
Changes font size to 2.5em. * Can be responsive |
.util-font-size-xxxl
|
Changes font size to 4em. * Can be responsive |
Font Family
| Class | Description |
|---|---|
.util-font-family-serif
|
Sets font family to 'Merriweather', serif. |
.util-font-family-sans
|
Sets font family to 'Oswald', sans-serif. |
.util-font-family-alt
|
Sets font family to 'Merriweather Sans', sans-serif. |
Ordered Lists
| Class | Description |
|---|---|
.util-list-upper-alpha
|
Sets the ordered list to use uppercase letters. |
.util-list-lower-alpha
|
Sets the ordered list to use lowercase letters. |
.util-list-leading-zero
|
Sets the ordered list to use digits with a leading zero on the 0-9 characters. |
.util-list-upper-roman
|
Sets the ordered list to use uppercase Roman numerals. |
.util-list-lower-roman
|
Sets the ordered list to use lowercase Roman numerals. |
* Responsive Classes
Some utility classes have the option to be responsive. To adjust what breakpoint a class starts to be in use you can add @sm, @md, @lg, @xl at the end of the class:
util-block: used at all screen sizesutil-block@sm: used at the small breakpoint and uputil-block@md: used at the medium breakpoint and uputil-block@lg: used at the large breakpoint and uputil-block@xl: used at the extra large breakpoint
VueJS Functionality
The v-cloak directive is enabled via the .v-cloak css class.